🎯 3 Bài Tập DOM & Events Cơ Bản

Thực hành các kỹ năng DOM manipulation và Event handling cơ bản

📚 Hướng dẫn sử dụng:

1. Copy từng bài: Nhấn nút "📋 Copy Bài Này" → Paste vào file .html mới → Viết code trong function

2. Demo: Nhấn "Demo" để xem kết quả mong đợi, nhấn "Thử nghiệm" để test code của bạn

3. Dễ hiểu: Tập trung vào DOM events: click, hover, input không dùng RegExp hay LocalStorage

📖 Lý thuyết: Dataset trong DOM

🔍 Dataset là gì?

Dataset là một thuộc tính đặc biệt trong DOM cho phép bạn lưu trữ dữ liệu tùy chỉnh trong các HTML element thông qua data-* attributes.

✍️ Cách viết trong HTML:

<div data-category="laptop">MacBook</div>
<div data-price="1500000">Sản phẩm</div>
<div data-user-id="123">User</div>

🔧 Cách sử dụng trong JavaScript:

// Lấy giá trị
element.dataset.category // "laptop"
element.dataset.price    // "1500000"
element.dataset.userId  // "123"

// Đặt giá trị
element.dataset.category = "phone";

⚡ Ví dụ thực tế:

1. Lọc sản phẩm theo loại:

💻 Laptop
📱 Phone
📟 Tablet
// Lọc tất cả sản phẩm laptop
const laptops = document.querySelectorAll('[data-category="laptop"]');
laptops.forEach(item => item.style.display = 'block');

2. Lưu ID để xử lý events:

<button data-user-id="123" onclick="deleteUser(this.dataset.userId)">
    Xóa user
</button>

✅ Lưu ý quan trọng:

  • Naming: data-user-id trong HTML thành dataset.userId trong JS (camelCase)
  • Kiểu dữ liệu: Dataset luôn trả về string, cần convert nếu cần số: parseInt(element.dataset.price)
  • Performance: Nhanh hơn so với getAttribute/setAttribute
  • Validation: HTML5 hợp lệ, không cần prefix đặc biệt

💡 Tip: Dataset rất hữu ích cho việc lưu trữ metadata và xử lý events trong các bài tập DOM!

📊 Bài 1: Lọc Bảng Dữ Liệu Động

DỄ

📋 Yêu cầu: Viết hàm filterTable(category)

  • Đầu vào: category (string) - loại sản phẩm cần lọc ('all', 'laptop', 'phone', 'tablet')
  • Nhiệm vụ: Ẩn/hiện các hàng trong bảng dựa trên category được chọn
  • Bonus: Cập nhật counter hiển thị số lượng sản phẩm được hiển thị
  • Gợi ý: Sử dụng querySelectorAll(), style.display, data attributes
Hiển thị: 8 sản phẩm
📦 Sản phẩm 🏷️ Loại 💰 Giá ⭐ Đánh giá
MacBook Pro M3 💻 Laptop 45,000,000đ ⭐⭐⭐⭐⭐
iPhone 15 Pro 📱 Phone 28,000,000đ ⭐⭐⭐⭐⭐
iPad Pro 📟 Tablet 25,000,000đ ⭐⭐⭐⭐
Dell XPS 13 💻 Laptop 35,000,000đ ⭐⭐⭐⭐
Samsung Galaxy S24 📱 Phone 22,000,000đ ⭐⭐⭐⭐
Samsung Tab S9 📟 Tablet 18,000,000đ ⭐⭐⭐⭐
ASUS ROG Strix 💻 Laptop 40,000,000đ ⭐⭐⭐⭐⭐
Google Pixel 8 📱 Phone 18,000,000đ ⭐⭐⭐⭐

🛒 Bài 2: Giỏ Hàng Mua Sắm

TRUNG BÌNH

📋 Yêu cầu: Viết 3 hàm quản lý giỏ hàng

1. addToCart(productId, quantity):

  • Đầu vào: ID sản phẩm, số lượng
  • Nhiệm vụ: Thêm sản phẩm vào giỏ, cập nhật số lượng nếu đã có

2. removeFromCart(productId):

  • Đầu vào: ID sản phẩm
  • Nhiệm vụ: Xóa sản phẩm khỏi giỏ hàng

3. updateCartDisplay():

  • Đầu vào: Không có
  • Nhiệm vụ: Cập nhật hiển thị giỏ hàng, tính tổng tiền

Bonus: Animation khi thêm vào giỏ, local storage

🛍️ Sản Phẩm

🎧 Tai nghe Sony
Tai nghe chống ồn cao cấp
2,500,000đ
⌚ Apple Watch
Đồng hồ thông minh Series 9
12,000,000đ
📷 Camera Canon
Máy ảnh DSLR chuyên nghiệp
25,000,000đ

🛒 Giỏ Hàng 0

Giỏ hàng trống

Tổng: 0đ

👨‍🎓 Bài 3: Quản Lý Sinh Viên

TRUNG BÌNH

📋 Yêu cầu: Viết 4 hàm quản lý danh sách sinh viên

1. addStudent():

  • Đầu vào: Lấy dữ liệu từ form
  • Nhiệm vụ: Thêm sinh viên mới vào danh sách
  • Validation: Kiểm tra tên không rỗng, tuổi 16-50

2. deleteStudent(id):

  • Đầu vào: id sinh viên
  • Nhiệm vụ: Xóa sinh viên khỏi danh sách

3. searchStudents():

  • Đầu vào: Từ khóa tìm kiếm
  • Nhiệm vụ: Filter danh sách theo tên

4. sortStudents(field):

  • Đầu vào: 'name', 'age', hoặc 'grade'
  • Nhiệm vụ: Sắp xếp danh sách

➕ Thêm Sinh Viên Mới

🔍 Tìm Kiếm & Điều Khiển

🔍

📋 Danh Sách Sinh Viên 0 học sinh

👤 Họ Tên
🎂 Tuổi
🏫 Lớp
⚡ Thao tác
� Chưa có sinh viên nào. Hãy thêm sinh viên đầu tiên!